<div class="page-group">
    <div class="page" data-page="book_kind">
        <header class="bar bar-nav">
            <a onclick="window.history.go(-1);" class="icon" style="width: 40%">
                <img src="__PUBLIC__/img/iconfont_back@2x.png" class="back_img">
            </a>
        </header>
        <div class="content">
            <div style="margin-top: 10px;">
                <div style="width: 100%;position: relative;text-align: center;margin: auto;">
                    <div id="my_int" style="position: absolute;left:0;right:0;top:3.2rem;color: #eb613d;">
                        我的积分<br />
                        <font style="font-size: 20px">{$score.total}</font>
                    </div>

                    <canvas id="myChart" style="width: 100%;height: 5rem;">
                    </canvas>
                </div>
                <div class="rate_publick">
                    <div class="rate_public_img" style="background:#FFADE8;float: left"></div>
                    <div style="float: left;line-height: 35px;margin-left: 5px">评论图书</div>
                    <div style="float: right;line-height: 35px">{$score.1.percent}%</div>
                </div>
                <div class="rate_publick">
                    <div class="rate_public_img" style="background:#BDD9FF;float: left"></div>
                    <div style="float: left;line-height: 35px;margin-left: 5px">评论视频</div>
                    <div style="float: right;line-height: 35px">{$score.3.percent}%</div>
                </div>
                <div class="rate_publick">
                    <div class="rate_public_img" style="background:#FFDC47;float: left"></div>
                    <div style="float: left;line-height: 35px;margin-left: 5px">参与活动</div>
                    <div style="float: right;line-height: 35px">{$score.4.percent}%</div>
                </div>
            </div>
        </div>
    </div>
</div>
<script type='text/javascript' src='__PUBLIC__/js/zepto.min.js' charset='utf-8'></script>
<script type='text/javascript' src='__PUBLIC__/js/sm.min.js' charset='utf-8'></script>
<script type='text/javascript' src='__PUBLIC__/js/sm-extend.min.js' charset='utf-8'></script>
<script type="text/javascript" src="//g.alicdn.com/msui/sm/0.6.2/js/sm-city-picker.min.js" charset="utf-8"></script>
<script type="text/javascript" src="__PUBLIC__/js/Chart.js"></script>
<script>
    var text="128分";
    var ctx = $("#myChart").get(0).getContext("2d");
    //This will get the first returned node in the jQuery collection.
    var myNewChart = new Chart(ctx);
    var data = [
        {
            value: {$score[1]['score']+$score[2]['score']},
            color:"#FFADEB",
            label: "评论图书"
        },
        {
            value : {$score.3.score|default='0'},
            color : "#BDD9FF",
            label: "评论视频"
        },
        {
            value : {$score.4.score|default='0'},
            color : "#FFDC47",
            label: "参与活动"
        }

    ]
    window.onload = function(){
        window.myDoughnut = new Chart(ctx).Doughnut(data, {
            responsive: true
        });
    }
    myNewChart.defaults={
        //Boolean - Whether we should show a stroke on each segment
        segmentShowStroke : true,

        //String - The colour of each segment stroke
        segmentStrokeColor : "#fff",

        //Number - The width of each segment stroke
        segmentStrokeWidth : 2,

        //Boolean - Whether we should animate the chart
        animation : false,

        //Number - Amount of animation steps
        animationSteps : 100,

        //String - Animation easing effect
        animationEasing : "easeOutBounce",

        //Boolean - Whether we animate the rotation of the Pie
        animateRotate : true,

        //Boolean - Whether we animate scaling the Pie from the centre
        animateScale : false,

        //Function - Will fire on animation completion.
        onAnimationComplete : null
    }
    </script>